<template>
	<view>
		<view v-for="(item,index) in mlist" :key="item.tit" class="list"
			:class="['bg-' + item.color,toggleDelay?'animation-slide-bottom':'']"
			:style="[{animationDelay: (index )*0.1 + 's'}]">
			<view class="dis">
				<view class="cuIcon-list text-blue" style="margin-right: 10px;"></view>
				<view>{{item.tit}}</view>
			</view>
			<view class="dis">
				<view>{{item.num ? item.num : '0' }}</view>
				<view class="cuIcon-right text-grey"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		statistics
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				mlist: [{
					tit: '今日添加',
				}, {
					tit: '今日学习',
				}, {
					tit: '需复习',
				}, {
					tit: '不认识',
				}, {
					tit: '答错',
				}, {
					tit: '未学习',
				}, {
					tit: '已认识',
				}],
				paddingTopNum: 100,
				toggleDelay: false,
			}
		},
		mounted() {
			this.ToggleDelay()
		},
		onShow() {
			this.yhtj()
		},
		methods: {
			async yhtj() {
				let id = this.$store.state.user.id
				const {
					data: res
				} = await statistics(id)
				let i = 0
				for (let key in res.data) {
					this.mlist.forEach((item,index)=>{
						if(index == i){
							item.num = res.data[key] 
						} 
					})
					i++
				}
				console.log(this.mlist)
			},
			ToggleDelay() {
				this.toggleDelay = true;
				setTimeout(() => {
					this.toggleDelay = false
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.list {
		background-color: #FFFFFF;
		margin: 10px 15px;
		padding: 20px 10px;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dis {
		display: flex;
		align-items: center;
	}
</style>
